<template>
  <common-card title="今日销售额" :value="numberFormat(salesToday)">
    <!-- 这个是默认插槽 -->
    <div class="compare-wrap">
      <div class="compare">
        <span>日同比</span>
        <span class="emphasis">{{ numberFormat(salesGrowthLastDay) }}%</span>
        <span class="decrement"></span>
      </div>
      <div class="compare">
        <span>月同比</span>
        <span class="emphasis">{{ numberFormat(salesGrowthLastMonth) }}%</span>
        <span class="increment"></span>
      </div>
    </div>
    <!-- 这个是剧名插槽 -->
    <template #footer>
      <span>昨日销售额</span>
      <span class="emphasis">￥{{ moneyFormat(salesLastDay) }}</span>
    </template>
  </common-card>
</template>

<script lang="ts">
import CommonCard from './CommonCard.vue'
export default {
  name: 'TodaySales',
  components: {
    CommonCard,
  },
}
</script>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useReportDataStore } from '@/stores/reportData'
// 引入格式化数据的函数
import useFormat from '@/hooks/useFormat'
// 获取store实例
const reportDataStore = useReportDataStore()
// 将那两个用来格式化数据的函数解构出来
const { numberFormat, moneyFormat } = useFormat()
// 1. 今日销售额
const salesToday = computed(() => reportDataStore.reportData.salesToday)
// 2. 日同比
const salesGrowthLastDay = computed(
  () => reportDataStore.reportData.salesGrowthLastDay
)
// 3. 月同比
const salesGrowthLastMonth = computed(
  () => reportDataStore.reportData.salesGrowthLastMonth
)
// 4. 昨日销售额
const salesLastDay = computed(() => reportDataStore.reportData.salesLastDay)
</script>

<style lang="scss" scoped>
.compare-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  .compare {
    flex: 1;
    display: flex;
    align-items: center;
  }
}
</style>
